
import React, { useState } from 'react';
import { Tree } from 'antd';
import { menuData } from "../../grants/menuData";
import { addAdminApi } from '../../api/admin';


// 操作人员列表
// 添加操作人员(编号，账号，密码，权限)
export default function () {

    const [admins, setAdmins] = useState([]);
    const [newAdmin, setNewAdmin] = useState({});

    // 跟权限相关的数据：
    const [checkedKeys, setCheckedKeys] = useState([]);

    const onCheck = (checkedKeysValue, e) => {
        console.log('onCheck', checkedKeysValue);
        console.log('onCheck.e', e);
        let arr = [...checkedKeysValue, ...e.halfCheckedKeys];
        console.log("arr", arr);
        setCheckedKeys(arr);
    };

    const addAdmin = async () => {
        newAdmin.checkedKeys = checkedKeys;
        let res = await addAdminApi(newAdmin)
        if (res.data) {
            alert("添加成功");
            setAdmins([
                ...admins,
                newAdmin
            ])
        }
    }

    return (
        <div>
            <h1>列表</h1>
            <table>
                <tr>
                    <td>编号</td>
                    <td>账号</td>
                </tr>
                {
                    admins.map(item => (
                        <tr>
                            <td>{item.id}</td>
                            <td>{item.name}</td>
                        </tr>
                    ))
                }
            </table>
            <h1>添加</h1>
            <p>
                编号：
                <input type="text" value={newAdmin.id} onChange={e => setNewAdmin({ ...newAdmin, id: e.target.value })} />
            </p>
            <p>
                账号：
                <input type="text" value={newAdmin.name} onChange={e => setNewAdmin({ ...newAdmin, name: e.target.value })} />
            </p>
            <p>
                密码：
                <input type="password" value={newAdmin.pass} onChange={e => setNewAdmin({ ...newAdmin, pass: e.target.value })} />
            </p>
            <p>
                <input type="button" value="添加" onClick={addAdmin} />
            </p>
            <p>
                <Tree
                    checkable
                    onCheck={onCheck}
                    treeData={menuData}
                />
            </p>

        </div>
    )
}
